<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:replace="common/common :: common-head">
    <div th:replace="common/common :: #common-js"></div>
</head>
<body>

<div th:replace="common/common :: #common-nav-left"></div>
<div th:replace="common/common :: #common-header"></div>


<!--页面主要内容-->
<main class="lyear-layout-content" id="index">

    <div class="container-fluid">
        <div id="app">
            <div class="row">

                <div class="col-lg-12">
                    <div class="card card-body">
                        <el-row>
                            <el-button type="text" icon="el-icon-circle-plus-outline" @click="dialogVisible = true">新增</el-button>
                            <el-dialog title="新增" :visible.sync="dialogVisible" width="25em" hidden-sm-and-up close-on-press-escape>
                                <el-form size="small" :model="forum" :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm">
                                    <el-form-item label="版本号" prop="version" required>
                                        <el-input :rules="forum" maxlength="5" show-word-limit placeholder="请输入版本号" v-model="forum.version" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="版本内容" prop="description" required>
                                        <el-input type="textarea" autosize placeholder="请输入版本内容" v-model="forum.description" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="节点颜色" prop="nodeColor" required>
                                        <el-select v-model="forum.nodeColor" placeholder="请选择节点颜色">
                                            <el-option
                                                    v-for="item in color"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="版本图标" prop="versionIcon" required>
                                        <el-select v-model="forum.versionIcon" placeholder="请选择版本图标">
                                            <el-option
                                                    v-for="item in options"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="* 图标预览">
                                        <el-button type="text" size="medium" :icon="forum.versionIcon" disabled></el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                                        <el-button size="mini" type="primary" @click="add('ruleForm')">确 定</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-dialog>

                        </el-row>
                    </div>
                    <div class="card card-body">
                        <div class="block">
                            <el-timeline>
                                <el-timeline-item  v-for="item in data.data" :timestamp="item.createDate" :icon="item.versionIcon" :type="item.nodeColor" placement="top">
                                    <el-card>
                                        <h4>{{item.description}}</h4>
                                        <br/>
                                        <small>王小虎 提交于 {{item.createDate}}</small>
                                        <div>
                                            <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="edit(item.id)">修改</el-button>
                                            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleted(item.id)">删除</el-button>
                                        </div>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>


</main>
<!--End 页面主要内容-->

<script th:src="@{/js/forum/version/list.js}"></script>
</body>
</html>